<template>
	<view class="flex col-center"
		:style="'position: ' + position + ';z-index: 8;top: 0;width: 100%;padding: 0 26rpx 16rpx;padding-top: ' + menuButtonInfo.top + 'px;background:' + navBackcolor + ';'">
		<!-- #ifndef APP-PLUS -->
		<view :style="'height: ' + (menuButtonInfo.height) + 'px;flex:1;'">
			<!-- 只自定义标题 -->
			<view class="flex col-center row-center" style="height: 100%;" v-if="!is_slot">
				<image v-if="showback" style="height: 48rpx;width: 48rpx;display: block;" @click="back()"
					:src="backiconwhite ? 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/nav-left-white.png' : 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/nav-left.png'"
					mode="widthFix"></image>
				<view style="flex: 1;text-align: center;">
					{{ title }}
				</view>
				<view style="width: 48rpx;height: 48rpx;" v-if="showback"></view>
			</view>
			<!-- 内容自定义 -->
			<view class="flex col-center row-center" style="height: 100%;" v-else>
				<image v-if="showback" style="height: 48rpx;width: 48rpx;display: block;" @click="back()"
					:src="backiconwhite ? 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/nav-left-white.png' : 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/nav-left.png'"
					mode="widthFix"></image>
				<view style="flex: 1;">
					<slot></slot>
				</view>
				<view style="width: 48rpx;height: 48rpx;"></view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuButtonInfo: {}
		}
	},
	// 组件参数 接收来自父组件的数据
	props: {
		is_slot: {
			type: Boolean,
			default: false
		},
		position: {
			type: String,
			default: 'sticky'
		},
		showback: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		navBackcolor: {
			type: String,
			default: '#fff'
		},
		backiconwhite: {
			type: Boolean,
			default: false
		},
	},
	created() {
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		console.log(this.menuButtonInfo, 'menuButtonInfo')
	},
	onShow() {

	},
	methods: {
		back() {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			if (prevPage) {
				uni.navigateBack({
					delta: 1
				})
			} else {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
	}
}
</script>

<style></style>